<template>
    <div class="menu">
      <!-- active-text-color: 当前选中菜单的文字颜色-黄色 -->
      <!-- default-active: 默认激活选中菜单的index,如果是嵌套的层级菜单必须使用子菜单指定的index -->
      <!-- text-color: 默认菜单文字的颜色 -->
      <!-- collapse:展开折叠菜单 -->
      <!-- @open:菜单展开触发的方法 @close：菜单折叠触发的方法 -->
      <!-- index: 菜单唯一的标志，设置路由之后可以指定路径进行页面跳转 -->
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="/"
        text-color="#fff"
        :collapse="menuStore.menuBoo"
        @open="handleOpen"
        @close="handleClose"
        router
      > 
        <el-menu-item :index="null">
          <MenuIcon name="Platform"/>
          <span>课堂后台管理系统</span>
        </el-menu-item>
        <template v-for="menu in menuList" :key="menu.id">
          <!-- 嵌套层级菜单 -->
          <el-sub-menu :index="menu.path" v-if="menu.subMenu">
            <!-- 父级菜单 -->
            <template #title>
              <!-- 调用封装的公共图标组件 -->
              <MenuIcon :name="menu.icon"/>
              <span>{{ menu.title }}</span>
            </template>
            <!-- 子菜单 -->
            <el-menu-item :index="sub.path" v-for="sub in menu.subMenu" :key="sub.id">
              <MenuIcon :name="sub.icon"/>
              <span>{{ sub.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 菜单的每一项 -->
          <el-menu-item :index="menu.path" v-else>
            <MenuIcon :name="menu.icon"/>
            <span>{{ menu.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
// 引入二次封装的图标
import MenuIcon from "./MenuIcon.vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
//引入pinia的菜单仓库
import { useMenuStore } from "../stores/menuCollapse"

//调用仓库方法
const menuStore = useMenuStore()

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 定义菜单数据结构
const menuList = ref<Array<any>>([
    {
        id:1,
        title:"仪表盘",
        icon:"Odometer",
        path:'/'
    },
    {
        id:2,
        title:"权限管理",
        icon:"lock",
        path:"/lock",
        subMenu:[{
            id:3,
            title:"用户管理",
            icon:"User",
            path:'/about'
        },
        {
            id:4,
            title:"角色管理",
            icon:"UserFilled",
            path:"/role"
        },
    {
        id:5,
        title:"权限管理",
        icon:"Unlock",
        path:"/lock"
    }]
    },
    {
        id:6,
        title:"讲师管理",
        icon:"Avatar",
        path:"/teacher",
        subMenu:[
            {
                id:7,
                title:"讲师列表",
                icon:"Tickets",
                path:'/teacherList'
            },
            {
                id:8,
                title:"添加讲师",
                icon:"Plus",
                path:'/teacherAdd'
            }
        ]
    },
    {
        id:9,
        title:"课程分类管理",
        icon:"Grid",
        path:'/courseCate',
        subMenu:[
            {
                id:10,
                title:"课程分类列表",
                icon:"Tickets",
                path:'/courseCateList'
            },
            {
                id:11,
                title:"导入课程类别",
                icon:"Download",
                path:"/courseCateAdd"
            }
        ]
    },
    {
        id:12,
        title:"课程管理",
        icon:"Collection",
        path:'/course',
        subMenu:[
            {
                id:13,
                title:"课程列表",
                icon:"Tickets",
                path:'/courseList'
            },
            {
                id:14,
                title:"添加课程",
                icon:"Plus",
                path:"/courseAdd"
            }
        ]
    },
    {
        id:15,
        title:"轮播图管理",
        icon:"PictureFilled",
        path:'/swiper',
        subMenu:[
            {
                id:16,
                title:"轮播图列表",
                icon:"Tickets",
                path:'/swiperList'
            },
            {
                id:17,
                title:"添加轮播图",
                icon:"Plus",
                path:"/swiperAdd"
            }
        ]
    },
    {
        id:18,
        title:"统计分析",
        icon:"DataLine",
        path:'/data',
        subMenu:[
            {
                id:19,
                title:"分析数据",
                icon:"Histogram",
                path:'/data'
            }
        ]
    },
    {
        id:20,
        title:"订单列表",
        icon:"List",
        path:'/order'
    },
    {
        id:21,
        title:"文章管理",
        icon:"Document",
        path:'/article',
        subMenu:[
            {
                id:22,
                title:"文章列表",
                icon:"Tickets",
                path:'/articleList'
            },
            {
                id:23,
                title:"添加文章",
                icon:"Plus",
                path:"/articleAdd"
            }
        ]
    },
    {
        id:24,
        title:"留言列表",
        icon:"Memo",
        path:'/memo'
    },
])


</script>

<style lang="less" scoped>
.menu{
  .el-menu{
    border-right: none;
  }
}
</style>